<template>
    <TemplateTitle titleName="每月目标完成率（%）" style="margin-bottom: 20rem;"></TemplateTitle>

    <div class="chart" style="margin-bottom:20rem;">
        <chart-line-bar :chartData="chartDataList" xAxisName="month" :option="option" :chartType="chartType"
            :twoYAxis="false" :unit="unit" :orient="'horizontal'"></chart-line-bar>
    </div>
</template>

<script setup>
import TemplateTitle from "@/components/common/templateTitle.vue"
import ChartLineBar from "./charts/ChartLineBar.vue"
import homeHttp from "@/https/home.js"
import { onMounted, ref } from "vue"

let chartDataList = ref([])

// const chartDataList = ref([
//     { time: '1月', gs: '10', xsc: '4', cbc: '6', cnc: '9', cxc: '3' },
//     { time: '2月', gs: '4', xsc: '5', cbc: '2', cnc: '2', cxc: '1' },
//     { time: '3月', gs: '6', xsc: '2', cbc: '7', cnc: '6', cxc: '5' },
//     { time: '4月', gs: '2', xsc: '8', cbc: '9', cnc: '4', cxc: '2' },
//     { time: '5月', gs: '1', xsc: '5', cbc: '3', cnc: '8', cxc: '8' }
// ])
const option = ref({})
const chartType = ref([
    {
        type: "line",
        code: "companyRate",
        name: "公司",
        linerColor: ["#369eff", "#369eff"],
    },
    {
        type: "line",
        code: "xingshaRate",
        name: "星沙厂",
        linerColor: ["#e33dff", "#e33dff"],
    },
    {
        type: "line",
        code: "cityNorthRate",
        name: "城北厂",
        linerColor: ["#ffc550", "#ffc550"],
    },
    {
        type: "line",
        code: "citySouthRate",
        name: "城南厂",
        linerColor: ["#b2e3e8", "#b2e3e8"],
    },
    {
        type: "line",
        code: "cityWestRate",
        name: "城西厂",
        linerColor: ["#85cc18", "#85cc18"],
    },
])
const unit = ref(['%'])

onMounted(() => {
    queryWaterCompleteRate()
})

const queryWaterCompleteRate = () => {
    homeHttp.queryWaterCompleteRate().then(res => {
        if (res.data.code == 200) {
            res.data.data.forEach((item) => {
                item.month = item.month + '月'
            })
            chartDataList.value = res.data.data
        }
    })
}
</script>

<style scoped></style>
